<template>
  <div class="live-stream-container">
    <div class="header">
      <div class="title-wrapper">
        <img
          src="@/assets/icons/home_live_item_left_icons.webp"
          alt="left decoration"
          class="decor-img"
        />
        <div class="title">
          <img src="@/assets/icons/home_live_item_title_bg.webp" class="bg" />
          <h2>热门直播</h2>
        </div>

        <img
          src="@/assets/icons/home_live_item_right_icons.webp"
          alt="right decoration"
          class="decor-img"
        />
      </div>
      <div class="tabs">
        <button
          v-for="(tab, index) in tabs"
          :key="tab"
          :class="{ active: index === activeTab }"
          @click="setActiveTab(index)"
        >
          {{ tab.name }}
        </button>
      </div>
      <button class="more-button" @click="goMore">查看更多直播 ></button>
    </div>
    <div class="streams">
      <div class="match-cards">
        <div
          class="match-card"
          v-for="(match, index) in matches"
          :key="index"
          v-show="index <= 10"
          @click="() => goLive(match)"
        >
          <div class="match-image">
            <div class="image-cover">
              <img v-lazy="match.screenShotUrl" data-load="false" class="cover" />
              <!--:src="match.screenShotUrl" @load="loadImage"
                @error="loadImage" -->
              <div class="player_icon">
                <PlayCircleOutlined :style="{ fontSize: '40px', color: '#fff' }" />
              </div>
            </div>

            <div class="match-info">
              <h3>{{ match.title }}</h3>
              <div class="streamer-info">
                <img :src="match.headImgUrl" alt="Streamer avatar" class="avatar" />
                <span class="streamer-name">{{ match.nickname }}</span>
                <span class="views">{{ formatViews(match.hotCount) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getLiveList } from '@/api/home'
import { decryptImageData } from '@/utils/utils'
import { useRouter } from 'vue-router'
import { PlayCircleOutlined } from '@ant-design/icons-vue'
// Reactive data
const activeTab = ref(0)
const router = useRouter()
const tabs = ref([
  { name: '热门直播', filter: '' },
  { name: '欧冠直播', filter: 2 },
  { name: '英超直播', filter: 9 },
  { name: '意甲直播', filter: 15 },
  { name: '德甲直播', filter: 21 },
  { name: '西甲直播', filter: 3 },
  { name: '法甲直播', filter: 20 },
  { name: 'NBA直播', filter: 580 }
])

const matches = ref([])

const formatViews = (views) => {
  return views >= 10000 ? `${Math.floor(views / 10000)}万+` : views.toString()
}

// Method to change active tab
const setActiveTab = (tab) => {
  activeTab.value = tab
  getData()
}

const goMore = () => {
  router.push(`/live`)
}
const getData = async () => {
  try {
    const res = await getLiveList({
      leagueId: tabs.value[activeTab.value].filter.toString(),
      size: 20
    })
    console.log(res, 'res')
    if (res.code === 200) {
      matches.value = res.data
    }
  } catch (error) {
    console.log(error, 'err')
  }
}

const getImgScreenShort = async (url) => {}
onMounted(() => {
  getData()
})
const loadImage = async (event) => {
  // let url = 'your_url_here' // 这里替换为你的 URL
  // console.log(event, 'loadImage')
  try {
    const load = event.target.getAttribute('data-load')
    if (load === 'false') {
      const data = await decryptImageData(event.target.currentSrc)
      event.target.src = data
      event.target.setAttribute('data-load', 'true')
    }
  } catch (error) {
    // console.error('Error fetching data:', error)
  }
}

const goLive = (match) => {
  router.push(`/live/${match.anchorId}`)
}
</script>

<style scoped lang="scss">
.live-stream-container {
  //   padding: 20px;
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .title-wrapper {
      display: flex;
      align-items: center;
      //   background-image: url('background-image.jpg'); /* 背景图片 */
      //   background-size: cover;
      //   background-position: center;
      //   padding: 10px 20px;
      //   border-radius: 10px;
      width: 100%;
      padding: 90px 0 40px;
      //   max-width: 800px;
      //   position: relative;

      .title {
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
        margin: 0 15px;

        .bg {
          width: 340px;
          height: 58px;
          position: relative;
          top: -20px;
        }
        h2 {
          // font-size: 24px;
          //   margin: 0 10px;
          // color: white; /* 文字颜色根据背景图片调整 */
          z-index: 1;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 600;
          font-size: 40px;
          color: #525a79;
          position: absolute;
          bottom: 0;
          &::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 50%;
            margin-left: -30px;
            width: 60px;
            height: 10px;
            background: linear-gradient(150deg, #2cea3d 16%, #22d13c 49%, #17b33b 100%);
            box-shadow: 0px 4px 8px 0px rgba(0, 255, 10, 0.25);
            border-radius: 8px 8px 8px 8px;
          }
        }
      }
      .decor-img {
        // width: 20px; /* 根据需要调整图片大小 */
        height: auto;
        width: 515px;
        flex: 1;
      }
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin: 10px 0;

      button {
        // padding: 10px 15px;
        border: none;
        border-radius: 20px;
        // background-color: #f5f5f5;
        cursor: pointer;
        outline: none;
        font-size: 16px;
        background: url('@/assets/icons/home_live_item_btn_bg.webp') no-repeat;
        width: 120px;
        height: 40px;
        background-size: 100% 100%;
        color: #525a79;
        // cursor: pointer;
        &.active {
          background: url('@/assets/icons/home_live_active_item_btn_bg.webp') no-repeat;
          background-size: 100% 100%;
          color: #ffffff;
        }
      }
    }

    .more-button {
      background: none;
      //   border: none;
      color: #949cbd;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      width: 160px;
      height: 38px;
      background: url('@/assets/icons/home_live_item_more_btn.webp') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }

  .streams {
    min-height: 200px;
    .match-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
      gap: 20px;
      width: 100%;
    }

    .match-card {
      width: 264px;
      height: 226px;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      background: url('@/assets/icons/home_live_item_bg.webp') no-repeat;
      background-size: 100% 100%;
      border: 1px solid transparent;

      .match-image {
        width: 100%;
        height: 150px;
        .image-cover {
          height: 150px;
          width: 100%;
          overflow: hidden;
          position: relative;
          .cover {
            width: 100%;
            height: 150px;
            object-fit: cover;
            overflow: hidden;
            transition: 0.5s all;
          }
          .player_icon {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -20px;
            margin-top: -20px;
            opacity: 0;
            transition: 0.5s all;
          }
        }
      }
      &:hover {
        border-radius: 24px;
        // background: url('@/assets/icons/home_live_item_active_bg.webp') no-repeat;
        // background-size: 100% 100%;
        box-shadow: 0 0 10px rgba(0, 255, 10, 0.8);
        border: 1px solid rgba(0, 255, 10, 0.8);
        // border-image: linear-gradient(180deg, rgba(41, 226, 60, 1), rgba(31, 200, 59, 1)) 2 2;
        .match-image {
          .image-cover {
            .cover {
              // transition: 0.5s all;
              transform: scale(1.2);
            }
            .player_icon {
              transform: scale(1.2);
              opacity: 1;
            }
          }
        }
      }
    }

    .match-info {
      //   position: absolute;
      //   bottom: 0;
      //   left: 0;
      //   right: 0;
      padding: 10px;
      color: #525a79;
      //   background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      //   color: white;
      //   background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);

      h3 {
        margin: 0 0 5px;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .streamer-info {
      display: flex;
      align-items: center;
      font-size: 14px;

      .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .views {
        margin-left: auto;
        color: #ff6b6b;
      }
    }
  }
}
</style>
